<template>
<div id="musicList">
    <div class="music_top">
        <span>推荐歌单</span>
        <span>更多&gt;</span>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div @click="listview(item.id)" class="swiper-slide musicCard" v-for="item in musicList" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
                <span>{{item.name}}</span>
                <div class="bofang">
                    <span class="iconfont icon-24gl-play"></span>
                    {{changeValue(item.playCount)}}
                    <!-- {{item.playCount}} -->
                </div>
            </div>

            <!-- 这里的swriper不知道为什么，使用v-for循环之后，后面还得有十个,前面才能滑动 -->
            <div class="swiper-slide"> </div>
            <div class="swiper-slide"> </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>

        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
    </div>
</div>
</template>

<script>
export default {
    name: "musicList",
    data() {
        return {
            musicList: []
        }
    },
    components: {
        
    },
    methods: {
        changeValue: function (num) {
            let res = 0;
            if (num >= 100000000) {
                res = num / 100000000;
                //toFixed是截取小数点后的位数
                res = res.toFixed(1) + '亿';
            } else if (num >= 10000) {
                res = num / 10000;
                res = res.toFixed(1) + '万';
            }
            return res;
        },

        listview: function (id) {
            // console.log(`点击${id}`);
            this.$router.push({
                path:'/listview',
                query:{
                    id:id
                }
            })
        }
    },
    created() {
        this.axios.get('/top/playlist/highquality', {
                params: {
                    limit: 10
                }
            })
            .then(res => {
                // console.log(res.data.playlists);
                this.musicList = res.data.playlists;
            })
            .catch(err => {
                console.log(err);
            })
    },
    mounted() {
        var swiper = new Swiper('.swiper-container', {
            // pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30,
        });
    },
    computed: {
        
    },
    filters: {

    }
}
</script>

<style lang="less" scoped>
.music_top {
    // margin-top: .3rem;
    background-color: #fff;
    padding: .2rem .1rem 0 .1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
        &:nth-of-type(1) {
            font-weight: 900;
            font-size: .4rem;
        }

        &:nth-of-type(2) {
            padding: .1rem;
            font-size: .28rem;
            border: 1px solid #ccc;
            border-radius: .4rem;
        }
    }
}

.swiper-container {
    width: 100%;
    height: 3.7rem;
    background-color: #fff;

    .swiper-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .musicCard {
            width: 2.6rem;
            height: 100%;
            // background-color: red;
            margin-left: .1rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: .3rem 0;
            position: relative;

            .bofang {
                position: absolute;
                top: .35rem;
                right: .3rem;
                background-color: rgba(22, 21, 21, 0.4);
                color: #dbd7d7;
                border-radius: .5rem;
                padding: .04rem;
                font-weight: 400;
                display: flex;
                align-items: center;
                font-size: .2rem;
            }

            img {
                width: 2.3rem;
                border-radius: .3rem;
            }

            span {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: .3rem;
                padding: 0 .10rem;
                font-family: Helvetica, sans-serif, STHeiTi;
            }
        }
    }
}
</style>
